<template>
	<view class="article-container">
		<h1 class="title">{{ articleTitle }}</h1>
		<rich-text :nodes="demoTxt"></rich-text>
		<!-- 场景核心：直接消费由Mock数据提供的nodes数组 -->
		<rich-text :nodes="articleNodes" :space="'ensp'" :selectable="true" :image-menu-prevent="false" :preview="true" @itemclick="onItemClick"></rich-text>
	</view>
</template>

<script>
// **关键点**：从本地mock文件导入数据获取函数
import { getArticleData } from './article.js';

export default {
	data() {
		return {
			articleTitle: '',
			articleNodes: [],
			demoTxt:
				'<h1><span class="ql-size-large" style="color: rgb(51, 51, 51);">范德萨范德萨</span></h1><p><br></p><p><span class="ql-size-huge">网上老年大学，是中国老年大学协会战略合作伙伴，全国老年大学官方线上学习APP，为全国中老年朋友提供知识、资讯、娱乐等优质服务，帮助中老年朋友更好地适应数字化生活。</span></p><p><br></p><p><br></p><p><img src="https://jwxtcdn.jinlingkeji.cn/saastest/308/2025-05/96f8e36b996e1f3b497796061006df43.jpg"></p>'
		};
	},
	onLoad() {
		// **关键点**：直接调用mock函数，同步获取数据
		const article = getArticleData();

		this.articleTitle = article.title;
		this.articleNodes = article.contentNodes;
	},
	methods: {
		onItemClick(e) {
			const node = e.detail.node;
			if (node.name === 'a' && node.attrs.href) {
				const href = node.attrs.href;
				if (node.attrs['data-type'] === 'internal-link') {
					uni.showToast({ title: `内部跳转: ${href}`, icon: 'none' });
					// uni.navigateTo({ url: href });
				}
			}
		}
	}
};
</script>

<style scoped>
.ql-size-huge {
	font-size: 2.5em;
}
</style>
